// JavaScript Document
$(document).ready(function() {
	
	var Size=$(".img li").length;
	for(var i=1;i<=Size;i++){
		var li ="<li>"+i+"</li>";//定义一个li，内嵌入变量i，i是变量所以需要添加连接符和引号。
	    $(".num").append(li);//在ul里添加入li
		}
	
	
	
	
	//手动控制轮播
	    $(".img li").eq(0).show();//在内容加载完毕之后首先让第一张图片显示出来。或者可直接在html li中添加display属性转化。
		//$(".num li").eq(0).addClass("active");
        $(".num li").mouseover(function(){
		$(this).addClass("active").siblings().removeClass("active");//当鼠标划过，给数字添加上红色背景样式，然后给同级其他元素移除掉该样式。
		var index=$(this).index();
		i=index;//将index赋值给i。两个数值的统一。
		$(".img li").eq(index).stop().fadeIn(1500).siblings().stop().fadeOut(1500);//找到图片所在位置li，通过eq匹配过滤后显示出所需要的图片。因为图片被设置了定位故需要选中同级其她元素进行淡出。在淡入淡出前添加stop，表示在执行淡入或者淡出前把所有动画停掉。
	
		})
		
	
	//自动控制轮播	
	$(".img li").eq(0).show();
	var i=0;//定义一个索引值
    var time=setInterval(move,1800);//设置一个定时器，并设置时间为1秒钟执行一次。
	
	
	//核心向右运动函数
	function move(){
		i++;
		if(i==5){
			i=0;
			}
		$(".num li").eq(i).addClass("active").siblings().removeClass("active");
		$(".img li").eq(i).fadeIn().siblings().fadeOut();
		}
		
	//核心向左运动函数	
	function moveL(){
		i--;
		if(i==-1){
			i=5;
			}
		$(".num li").eq(i).addClass("active").siblings().removeClass("active");
		$(".img li").eq(i).fadeIn().siblings().fadeOut();
		}
		
		
	//定时器的开始与结束	
	$(".out").hover(function(){
		clearInterval(time);//当鼠标滑过图片清除掉名为time的定时器。
		},function(){
			time=setInterval(move,1800);//当鼠标移出后继续执行该计时器。
			})
			
			
	//左右点击切换
	$(".out .left").click(function(){
		moveL();
		})
	$(".out .right").click(function(){
		move();
		})
});


/*导航*/

$("document").ready(function() {
   $(".list li").each(function(index){
	   var listNode=$(this);
	   $(this).click(function(){
		   $(".list li.on").removeClass("on");
		  listNode.addClass("on");
		   })
	   })  
});


/*登陆浮层*/
$(function(){
$("#btn").click(function(){
$(".bg").fadeIn(1000)
$(".center").css("display","block")
})
$(".spanNo").click(function(){
$(".center").css("display","none")
$(".bg").fadeOut(1000)
})
})
/*注册浮层*/
$(function(){
$("#btn2").click(function(){
$(".bg").fadeIn(1000)
$(".center").css("display","block")
})
$(".spanNo").click(function(){
$(".center").css("display","none")
$(".bg").fadeOut(1000)
})
})
